import React, { PureComponent } from 'react'

import { Input, Button, message } from 'antd';

import moment from 'moment'

export default class CommentInput extends PureComponent {
  constructor() {
    super()

    this.state = {
      content: ''
    }
  }

  render() {
    return (
      <>
        <Input.TextArea 
          rows={4} 
          value={this.state.content} 
          onChange={e => this.handleInputChange(e)} 
        />
        
        <Button 
          type="primary" 
          style={{marginTop: '20px'}}
          onClick={this.handleCommentClick.bind(this)}
        >
            添加评论
        </Button>
      </>
      
    )
  }

  handleInputChange(event) {
    this.setState({
      content: event.target.value
    })
  }

  handleCommentClick() {
    if(!this.state.content) return message.error('不能为空！！！')
    const contentInfo = {
      id: moment().valueOf(),
      name: '今晚关心人类',
      date: moment(),
      avatar: require('./images/random.svg'),
      content: this.state.content
    }
    console.log(contentInfo);
    this.props.commentChange(contentInfo)
    this.setState({
      content: ""
    })
  }
}
